import React from 'react';
import styled, { keyframes } from 'styled-components';
import { Position } from '../utils/gameUtils';

const pulse = keyframes`
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
`;

interface HeartProps {
  position: Position;
  size: number;
  color: string;
  isFood?: boolean;
}

const HeartShape = styled.div<HeartProps>`
  position: absolute;
  left: ${props => props.position.x}px;
  top: ${props => props.position.y}px;
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  transform-origin: center;
  animation: ${props => props.isFood ? pulse : 'none'} 1s infinite;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: ${props => props.size * 0.5}px;
    height: ${props => props.size * 0.8}px;
    border-radius: ${props => props.size * 0.5}px ${props => props.size * 0.5}px 0 0;
    background-color: ${props => props.color};
    transform-origin: bottom;
  }

  &:before {
    transform: rotate(-45deg);
    left: ${props => props.size * 0.25}px;
  }

  &:after {
    transform: rotate(45deg);
    right: ${props => props.size * 0.25}px;
  }
`;

const Heart: React.FC<HeartProps> = ({ position, size, color, isFood = false }) => {
  return (
    <HeartShape
      position={position}
      size={size}
      color={color}
      isFood={isFood}
    />
  );
};

export default Heart; 